<template>
  <div class="detailWrapBoxCe">
    <div @click="clearDetailIndex" class="topBack"><i></i></div>
    <div class="detailBody">
      <div class="tableScrollBox">
        <el-table
          :data="currentPageData"
          class="custom-table"
          style="width: 100%"
        >
          <el-table-column label="序号" width="80" align="center">
            <template #default="scope">
              <!-- 计算公式：(当前页-1)*每页条数 + 索引 + 1 -->
              {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="areaPoint" label="区域点" width="100" />
          <el-table-column prop="longitude" label="经度" width="110" />
          <el-table-column prop="latitude" label="纬度" width="110" />
          <el-table-column prop="unavailableTime" label="不可用时间段（UTC）" />
          <el-table-column
            prop="unavailableTotalTime"
            label="不可用累计时间（分钟）"
            width="180"
          />
        </el-table>
      </div>
      <el-pagination
        class="custom-pagination"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, defineEmits, computed, defineProps } from "vue";

const props = defineProps({
  airTestsAreaObj: {
    type: Array,
    default: () => [],
  },
});

console.log(props);

const total = ref(150);
const pageSize = ref(10);
const currentPage = ref(1);
const tableData = ref([
  {
    index: "01",
    areaPoint: "376",
    longitude: "98.75",
    latitude: "43.75",
    unavailableTime:
      "2018/10/29 03:31:00--2018/10/29 03:31:00<br>2018/10/30 03:27:00--2018/10/30 03:27:00<br>2018/10/31 03:23:00--2018/10/31 03:23:00",
    unavailableTotalTime: "3",
  },
  {
    index: "01",
    areaPoint: "376",
    longitude: "98.75",
    latitude: "43.75",
    unavailableTime:
      "2018/10/29 03:31:00--2018/10/29 03:31:00<br>2018/10/30 03:27:00--2018/10/30 03:27:00<br>2018/10/31 03:23:00--2018/10/31 03:23:00",
    unavailableTotalTime: "3",
  },
  {
    index: "01",
    areaPoint: "376",
    longitude: "98.75",
    latitude: "43.75",
    unavailableTime:
      "2018/10/29 03:31:00--2018/10/29 03:31:00<br>2018/10/30 03:27:00--2018/10/30 03:27:00<br>2018/10/31 03:23:00--2018/10/31 03:23:00",
    unavailableTotalTime: "3",
  },
  {
    index: "01",
    areaPoint: "376",
    longitude: "98.75",
    latitude: "43.75",
    unavailableTime:
      "2018/10/29 03:31:00--2018/10/29 03:31:00<br>2018/10/30 03:27:00--2018/10/30 03:27:00<br>2018/10/31 03:23:00--2018/10/31 03:23:00",
    unavailableTotalTime: "3",
  },
  {
    index: "01",
    areaPoint: "376",
    longitude: "98.75",
    latitude: "43.75",
    unavailableTime:
      "2018/10/29 03:31:00--2018/10/29 03:31:00<br>2018/10/30 03:27:00--2018/10/30 03:27:00<br>2018/10/31 03:23:00--2018/10/31 03:23:00",
    unavailableTotalTime: "3",
  },
  {
    index: "01",
    areaPoint: "376",
    longitude: "98.75",
    latitude: "43.75",
    unavailableTime:
      "2018/10/29 03:31:00--2018/10/29 03:31:00<br>2018/10/30 03:27:00--2018/10/30 03:27:00<br>2018/10/31 03:23:00--2018/10/31 03:23:00",
    unavailableTotalTime: "3",
  },
  {
    index: "01",
    areaPoint: "376",
    longitude: "98.75",
    latitude: "43.75",
    unavailableTime:
      "2018/10/29 03:31:00--2018/10/29 03:31:00<br>2018/10/30 03:27:00--2018/10/30 03:27:00<br>2018/10/31 03:23:00--2018/10/31 03:23:00",
    unavailableTotalTime: "3",
  },
  {
    index: "02",
    areaPoint: "377",
    longitude: "98.40",
    latitude: "43.19",
    unavailableTime: "2018/10/30 03:27:00--2018/10/30 03:27:00",
    unavailableTotalTime: "4",
  },
  {
    index: "03",
    areaPoint: "378",
    longitude: "98.01",
    latitude: "43.20",
    unavailableTime:
      "2018/10/30 03:27:00--2018/10/30 03:27:00<br>2018/10/30 03:27:00--2018/10/30 03:27:00",
    unavailableTotalTime: "10",
  },
  {
    index: "04",
    areaPoint: "379",
    longitude: "97.11",
    latitude: "43.17",
    unavailableTime: "2018/10/30 03:27:00--2018/10/30 03:27:00",
    unavailableTotalTime: "1",
  },
  {
    index: "04",
    areaPoint: "379",
    longitude: "97.11",
    latitude: "43.17",
    unavailableTime: "2018/10/30 03:27:00--2018/10/30 03:27:00",
    unavailableTotalTime: "1",
  },
  {
    index: "04",
    areaPoint: "379",
    longitude: "97.11",
    latitude: "43.17",
    unavailableTime: "2018/10/30 03:27:00--2018/10/30 03:27:00",
    unavailableTotalTime: "1",
  },
  {
    index: "04",
    areaPoint: "379",
    longitude: "97.11",
    latitude: "43.17",
    unavailableTime: "2018/10/30 03:27:00--2018/10/30 03:27:00",
    unavailableTotalTime: "1",
  },
  {
    index: "04",
    areaPoint: "379",
    longitude: "97.11",
    latitude: "43.17",
    unavailableTime: "2018/10/30 03:27:00--2018/10/30 03:27:00",
    unavailableTotalTime: "1",
  },
  {
    index: "04",
    areaPoint: "379",
    longitude: "97.11",
    latitude: "43.17",
    unavailableTime: "2018/10/30 03:27:00--2018/10/30 03:27:00",
    unavailableTotalTime: "1",
  },
  {
    index: "04",
    areaPoint: "379",
    longitude: "97.11",
    latitude: "43.17",
    unavailableTime: "2018/10/30 03:27:00--2018/10/30 03:27:00",
    unavailableTotalTime: "1",
  },
  {
    index: "04",
    areaPoint: "379",
    longitude: "97.11",
    latitude: "43.17",
    unavailableTime: "2018/10/30 03:27:00--2018/10/30 03:27:00",
    unavailableTotalTime: "1",
  },
  {
    index: "04",
    areaPoint: "379",
    longitude: "97.11",
    latitude: "43.17",
    unavailableTime: "2018/10/30 03:27:00--2018/10/30 03:27:00",
    unavailableTotalTime: "1",
  },
  // 这里可继续添加更多模拟数据，确保总数据量符合 total 的值
]);
const emit = defineEmits(["update-curr-detail-index"]);
const clearDetailIndex = () => {
  emit("update-curr-detail-index", "");
};
// 计算当前页数据
const currentPageData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return tableData.value.slice(start, end);
});
// 每页条数改变时的回调
const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1;
};
// 当前页改变时的回调
const handleCurrentChange = (val) => {
  currentPage.value = val;
};

onMounted(() => {});
</script>

<style scoped lang="scss">
.detailWrapBoxCe {
  width: 100%;
  // height: 675px;
  height: calc(100% - 10px);
  overflow-y: auto;
  position: absolute;
  top: 0;
  left: 0;
  background: #070f24;
  z-index: 1;
  .topBack {
    cursor: pointer;
    width: 100%;
    height: 24px;
    margin-bottom: 16px;
    i {
      float: left;
      width: 24px;
      height: 24px;
      background-image: url("../../../assets/images/raim/back.png");
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
    }
  }
  .detailBody {
    width: 100%;
    overflow: hidden;
  }
}
/* 自定义表格样式 */
::v-deep .custom-table .el-table__header {
  height: 40px;
  line-height: 40px;
  background: rgba(0, 175, 255, 0.2);
}
::v-deep .custom-table .el-table__header th {
  font-size: 12px;
  font-weight: 700;
  background: rgba(0, 175, 255, 0.2);
  color: #ffffff;
}
::v-deep .custom-table .el-table__row:nth-child(even) {
  background: rgba(0, 59, 122, 0.2) !important;
}
::v-deep .custom-table .el-table__row:nth-child(odd) {
  background-color: transparent;
}
::v-deep .custom-table .el-table__body td {
  color: #ffffff;
}
/* 自定义分页样式 */
.custom-pagination {
  float: right;
  margin-top: 20px;
}
.custom-pagination .el-pagination__total {
  color: #ffffff;
}
.custom-pagination .el-pagination__sizes {
  color: #ffffff;
}
.custom-pagination .el-pagination__sizes .el-input__inner {
  background-color: transparent;
  color: #ffffff;
  border: 1px solid #3e465e;
}
.custom-pagination .el-pagination__sizes .el-input__inner:hover {
  border-color: #4aadf8;
}
.custom-pagination .el-pagination__btn {
  background-color: transparent;
  color: #ffffff;
  border: 1px solid #3e465e;
}
.custom-pagination .el-pagination__btn:hover {
  background-color: #4aadf8;
  border-color: #4aadf8;
}

.custom-pagination .el-pagination__active {
  background-color: #00a2ff;
  color: #ffffff;
  border: 1px solid #00a2ff;
}
.custom-pagination .el-pagination__jump {
  color: #ffffff;
}
.custom-pagination .el-input__inner {
  background-color: transparent;
  color: #ffffff;
  border: 1px solid #3e465e;
}
.custom-pagination .el-input__inner:hover {
  border-color: #4aadf8;
}
::v-deep .tableScrollBox {
  height: 566px;
  overflow-y: auto;
}

::v-deep .tableScrollBox::-webkit-scrollbar {
  width: 2px;
}
::v-deep .tableScrollBox::-webkit-scrollbar-track {
  background: rgba(6, 15, 37, 0.5);
  border-radius: 2px;
}

::v-deep .tableScrollBox::-webkit-scrollbar-thumb {
  background: rgba(0, 175, 255, 0.4);
  border-radius: 2px;
}

::v-deep .tableScrollBox::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 175, 255, 0.6);
}

::v-deep .tableScrollBox {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 175, 255, 0.4) rgba(6, 15, 37, 0.5);
}
/* 表格容器背景透明 */
:deep(.el-table) {
  background-color: transparent !important;
  border: none;
}
:deep(.el-table__body tr) {
  background-color: transparent !important;
}

:deep(.el-table__header tr) {
  color: #c5d6e6;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  background-color: transparent !important;
}
/* 斑马线样式：偶数行 */
:deep(.table-row-even) {
  background-color: rgba(0, 59, 122, 0.2) !important;
}

/* 斑马线样式：奇数行 */
:deep(.table-row-odd) {
  background-color: transparent !important;
}

/* 表格行hover效果 */
:deep(.el-table__row:hover > td) {
  background-color: rgba(0, 59, 122, 0.2) !important;
}

/* 去掉表格默认边框线 */
:deep(.el-table__inner-wrapper::before) {
  background-color: transparent !important;
}
:deep(.el-table__cell) {
  border-bottom: none !important;
}
/* 关键：修改斑马线行的单元格背景色 */
:deep(
    .el-table--striped
      .el-table__body
      tr.el-table__row--striped
      td.el-table__cell
  ) {
  padding: 0;
  background-color: rgba(0, 59, 122, 0.2) !important;
}
:deep(.el-table .cell) {
  padding-right: 0 !important;
}
:deep(.el-pagination__sizes) {
  color: #fff;
}
:deep(.el-pagination__total) {
  color: #fff;
}
:deep(.el-pagination__jump) {
  color: #fff;
}
:deep(.el-pager li) {
  background-color: transparent !important;
  color: #fff;
  border: 1px solid #3e465e;
}
:deep(.el-pager li:hover) {
  background-color: #4aadf8 !important;
  color: #fff;
  border: 1px solid #4aadf8;
}
:deep(.el-pager .is-active) {
  background-color: #4aadf8 !important;
  color: #fff;
  border: 1px solid #4aadf8;
}
:deep(.el-pagination button),
:deep(.el-select__wrapper),
:deep(.el-input__wrapper) {
  background-color: transparent !important;
  color: #fff !important;
  border: 1px solid #3e465e;
}
:deep(.el-pagination .el-input__inner),
:deep(.el-select__placeholder) {
  color: #fff;
}
</style>
